RECAD 


In the previous lesson, we learnt more About string 
formatting and the various built in methoas! 
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RECAD 


Newline 


To represent “ character Let myString = "\"hello\"" 


To get the char ata 


Let firstChar = myString[®@] 
particular index 


To get the length of a /_mystring.2ength | 


string 


RECAD 


Convert string to uppercase myString.toUpperCase() | 
Convert string to lowercase myString.toLowerCase() | 


Replace all occurrences of a ; eae 
myString.replace("money", "tea" ) 
Substring 


Get chars between starting 
and ending indexes 


Intro to 
Functions 


4 


Learning Objective 


How to define a function in JavaScript 

How to call a function 

How to call functions 

Differentiate between global and local variables 


How to return a value from a function 
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Activity 

. Split into groups of 4 

Each one gets an envelope with a specific task 
written on It 

Each member will fake Turns to perform their 
task and put their results into their envelope 
Pass the envelope to the next member 


Functions 


Can be seen as “containers for code. 


Like the envelopes — they contain the instructions 
To perform. 


Function Definition 


To detine a function in JavaScript we use the 
syNTOX: 


- The function keyword means 
- you want this to be a function 


This is the name of the 
function 


function functionName() { 
// Function code ——— 


The parameters of the function 


Within the curly braces we go inside these parentheses. 
put the body of the function _ This function has no parameters 


Function Call 


To call a function we use this syntax: 


function | (ey 
// Functton code 
} 


Let's see how functions change the flow of execution: 


JStutor [eo] 
— > 
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Bake Bread 


Take a few minutes to complete the first 
“functions” exercise — Bake Bread 


Solution 


function mixDough() { 
console.log("The dough has been mixed" ) 


I 


function bake() { 
console.log("The bread has been baked!") 


i 


mixDough() 
bake() 


Calling Functions from Functions 


We can also call functions trom within other 


functions 
| bakeBread() 
function bakeBread() { za 


mixDough() 


bake() 
} 


Aa m4 Ww 


mixDough() bake() 


More on that later... 


We'll talk more about functions at a later stage. 


For now, whenever you see exercises that soecity 
to “write a function that...” — you'll know what to 
ASS 


Yay! | can code functions now! 


let 


Remember how we assign variables as var¢ 


var a= 3 


To learn more about the 
difference between var and 
From now on we will Use let let: 

https://www.geeksforgeeks. 
org/difference-between-var-a 
Let a = 3 nd-let-in-javascript/ 
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CONsT 


There is also the const declaration 


TL 


This creates a constant where the value cannot 
be changed through reassignment 


const a = 3 
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Variables in functions 


function doA() { 


let a = 3 
} 


console.log(a) // What will be printed? \ 
= 


FS 


Concept: Local Variables 


doA Locals: 


a 3 
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Concept: Global Variables 


doA Locals: 


function doA() { 
HeEsar — re Name | 
console. log(a) 3 3 


I 


Let a = 1337 Global 
| Name Value we 


doA( ) 
console. log(a) qa 1337 


Concept: Global Variables 


doA Locals: 


Let a = 1337 
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function doA() { 


console. log(a) Globals: 
1 


doA() a 1337 
console. log(a) 


Conceot: Global Variables 


doA Locals: 
function ‘On at 
a= 3 
console. (a) Globals: 


a 3 


Concept: Block Scope 


let a = 3 
console. log(a) Cslobals: 


Let a = 1337 4 3 


console. log(a) a (block 1) 1337 
} 


console. log(a) 


Concept: Block Scope 


var a= 3 


console. log(a) Global 


var a = 1337 P 1337 
console. log(a) 


} 


console. log(a) 


let 


That's why we use let! 
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Global Scope 


~ Local Scope 


wihaetel Stee) 
f function doA() { 


Summary: Soucy 


(function doA() { 3 "Local Seope 


Block Scope 


~ console. log(a) 


Variables Search 


Current Current 
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To declare a function 


function 
// Function code 


I 


To call the function 


Local Variable: When you define 


a variable in a function 


Global Variable: When you define 


a variable outside a function 


Not all bread dough Is the same 


There are many different recipes 


What does the baker need To know¢ 


So how could we accommodate our mixDough 
function to be generic¢ 
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efining a new 


function mixDough(amountFlour, amountwWater) { 
console. log(amountFlour, amountWater) 


mixDough(5, 10) 


function mixDough(amountFlour, amountWater) { 
console. log(aqmountFlour, amountWater) 


} 


mixDough(5, 10) // Bread 
mixDough(1, 10) // Pancakes 


amountFlour 


amount Water 


Take a few minutes fo complete the “Generic 
Bread” exercise 


function mixDough(amountFlour,amountWater) { 
console.log( Mixing ${amountFlour}g flour and 
amountWater}ml water in to dough ) 


I 


function bake(bakeTime) { 


console.log( The bread has been baked for 
bakeTime} minutes!” ) 


I 


mixDough(25@, 50) 
bake(25) 


DEFENDING OUR DIGITAL WAY OF LIFE 


Remember the envelope game¢ 


Each one performed a Task, put the result in an 
envelope and transferred it fo The next person 


That way we were able to chain a few small 
operations in order to complete a more complex 
task 


2 DIGITAL WAY OF LIFE 


We can “return” a result from a function! 


function 
return 


I 


Let result = (1014, 323) 


console. (result) 


Then we can pass this return value To other 
functions! 


function add(lhs, rhs) { 
return Lhs + rhs 


i 


alert(String(add(1014, 323))) 


Take a few minutes fo complete the “Return of 
the Bread” exercise 
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function mixDough(amountFlour,amountWater) { 


console.log( Mixing ${amountFlour}g flour and 


amountWater}ml water in to dough ) 
return "dough" 


} 


function bake(bakeTime,dough) { 


console.log( The bread has been baked for 
minutes! ) 

if (dougn == douph, )- { 

return "bread" 

} 
} 
Let dough = (mixDough(250,5@) ) 
console. log(bake(25, dough) ) 
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bakeTime 


“Ok but | still dont understand what's 
SO good about these function 
things... 


*rolls eyes* 


Using a single command, we were able To 
achieve a very very complicated Task! 


And we don't need to know anything 
about what happens behind the scenes. 


The “implementation details” are hidden 
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You don't have to be a baker To call the 
mixDough function 


You just need to know the inputs and outputs 


Code that is more Code that Is easier to 


Readable Modular Extend Debug 
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Take a few minutes to complete the “Abstract 
Bake” exercise 


Sentinel | 


JSEFiddle 


Solution 


function mixDough(amountFlour, amountWater) { 
console.log( Mixing ${amountFlour}g flour and ${amountWater}ml water in to dough ) 
return "dough" 


} 


function bake(bakeTime, dough) { 
console.log( The bread has been baked for ${bakeTime} minutes!” ) 
if(dough == "dough"){ 
return "bread" 
} 
} 


function bakeBread(amountFlour, amountWater, bakeTime){ 
Let mixture = mixDough(amountFLour, amountwater ) 
return bake(bakeTime, mixture) 


} 


console. log(bakeBread(150, 50, 25)) 
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Don’t Repeat Yourself! C) 


Reduce repetition in code by implementing 
abstractions! This will avoid redundancy! 
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ie 
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function 
return 


} 


let result = (1014, 323) 


console. (result) 
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